<template>
	<view style="width: 100%">
		<view class="photo">
			<view class="photo-font">
				<view class="photo-font-title">待提现现金</view>
				<view class="photo-font-money">{{ cash }}<text style="font-size: 30rpx">¥</text></view>
			</view>
			<image mode="scaleToFill" style="width: 100%;height: 100%"
				src="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/aizhuanqian1.png"></image>
		</view>
		<view class="main">
			<view class="main-money">
				<text class="main-money-text1">已提现金额</text>
				<text class="main-money-text2">{{alreadyCash}}</text>
				<text class="main-money-text3">¥</text>
			</view>
			<view class="main-money-deposit" @click="invite">全部提现</view>
			<view class="main-money-bill" @click="detail">明细账单</view>
		</view>
		<view class="font">
			<view class="font-title">温馨提示：</view>
			<view class="font-title">1、如何提现?</view>
			<view class="font-context">可在“用户中心->联系客服”联系客服提现</view>
			<view class="placeholder"></view>
			<view class="font-title">2、为什么我邀请的人充值后，我没有佣金?</view>
			<view class="font-context">(1)被邀请人需要是没有使用过本产品的新用户</view>
			<view class="font-context">(2)被邀请人已经被其他用户邀请过了</view>
			<view class="placeholder"></view>
			<view class="font-title">3、怎样才能赚更多的佣金?</view>
			<view class="font-context">尽早邀请新用户锁定下级(即我的下下级)，后续下下级用户所有消费都有5%的佣金。</view>
			<view class="placeholder" style="height: 60rpx"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cash: 0,
				alreadyCash: 0,
			};
		},
		onLoad(e) {
			console.log('e', e)
			this.cash = e.cash || 0
			this.alreadyCash = e.alreadyCash || 0
		},
		onShareAppMessage: function() {},
		onShareTimeline: function(res) {},
		methods: {
			close() {
				this.show = false;
			},
			gb() {
				this.show = false
				console.log('close');
			},
			tz() {
				uni.switchTab({
					url: '../document/document'
				});
			},
			invite() {
				let content = "暂无佣金可提现，快去分享赚佣金吧";
				if (this.cash > 0 && this.cash < 200) {
					content = "满200才能提现，继续分享赚佣金吧";
				} else if (this.cash >= 200) {
					content = "可在“用户中心->联系客服”联系客服提现";
				}
				wx.showModal({
					content: content,
					showCancel: !1,
					confirmText: "明白",
					success: function(t) {},
				});
			},
			detail() {
				uni.navigateTo({
					url: '/pages_markMoney/promotion3/promotion3'
				});
			},
			memory() {}
		}
	};
</script>

<style lang="scss" scoped>
	.photo {
		width: 100%;
		height: 300rpx;
		position: relative;

		.photo-font {
			width: 100%;
			height: 100%;
			position: absolute;
			top: -30rpx;
			left: 0px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;

			.photo-font-title {
				font-size: 28rpx;
			}

			.photo-font-money {
				font-size: 80rpx;
				margin-top: 10rpx;
			}
		}
	}

	.main {
		width: 90%;
		height: 600rpx;
		margin: 0px auto;
		background-color: #fff;
		border-radius: 50rpx;
		box-shadow: 0px 0px 2px 2px rgba(200, 200, 200, .2);
		position: relative;
		top: -70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.main-money {
			width: 80%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F4F7FF;
			border-radius: 60rpx;

			.main-money-text1 {
				font-size: 26rpx;
				color: #333333;
			}

			.main-money-text2 {
				font-size: 60rpx;
				color: #333333;
				font-weight: 700;
				margin: 0px 6rpx;
			}

			.main-money-text3 {
				font-weight: 700;
				font-size: 36rpx;
				color: #333333;
				transform: translateY(6rpx);
			}
		}

		.main-money-deposit {
			width: 86%;
			height: 100rpx;
			margin: 50px auto 0rpx;
			border-radius: 60rpx;
			background-color: #4E89F5;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.main-money-bill {
			width: 86%;
			height: 100rpx;
			margin: 20px auto 0rpx;
			border-radius: 60rpx;
			background-color: #fff;
			border: 1rpx solid #4E89F5;
			color: #4E89F5;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.font {
		font-size: 26rpx;
		line-height: 50rpx;
		padding: 0rpx 50rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.font-title {
		color: #333;
	}

	.font-context {
		color: #726f6f;
	}

	.placeholder {
		height: 20rpx;
	}
</style>